<template>
    <Modal v-model="show" width="850" :mask-closable="false" :closable="false" :title="options.title?options.title:''"
           @on-cancel="modelCancel">
        <div class="form-market">
            <div class="title-style">事项要件</div>
            <vxe-toolbar>
                <template v-slot:buttons>
                    <vxe-button icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
                    <vxe-button @click="$refs.xTable.removeCheckboxRow()">删除选中</vxe-button>
                    <vxe-button icon="fa fa-save" @click="saveEvent">保存</vxe-button>
                </template>
            </vxe-toolbar>

            <vxe-table
                    border
                    show-overflow
                    ref="xTable"
                    class="my_table_insert"
                    max-height="400"
                    min-height="100"
                    :data="tableData"
                    :edit-config="{trigger: 'click', mode: 'cell', icon: 'fa fa-pencil'}">
                <vxe-table-column type="checkbox" width="60"></vxe-table-column>
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column field="name" min-width="200" title="材料名称" sortable
                                  :edit-render="{name: 'input', defaultValue: '默认的名字'}"></vxe-table-column>
                <vxe-table-column field="sex" min-width="100" title="校验规则" :edit-render="{name: 'input'}"></vxe-table-column>
                <vxe-table-column field="age" min-width="100" title="是否必填" sortable
                                  :edit-render="{name: 'input', defaultValue: 18}"></vxe-table-column>
            </vxe-table>
        </div>
        <div slot="footer">
            <Button @click="modelCancel" :loading="loading1">取消</Button>
            <Button type="success" @click="handleSubmit(options.formData)" :loading="loading2">提交</Button>
        </div>
    </Modal>
</template>

<script>
export default {
  name: 'FormData',
  props: {
    options: {
      type: Object,
      default: () => {
        return {}
      }
    },
    show: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    state: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      loading1: false,
      loading2: false,
      formItem: {},
      tableData: [],
      sexList: []
    }
  },
  methods: {
    handleSubmit (formValidate) {
      this.$refs.wlModelForm.getFormData(this.addAndEditData)
    },
    modelCancel () {
      this.$emit('cancelShow')
    },
    addAndEditData (data) {
      if (data !== false) {
        this.loadingRun()
        this.$emit('result', data)
      } else {
        this.$Message.error('请检查输入项！')
      }
    },
    loadingRun () {
      this.loading2 = !this.loading2
    },
    async findSexList () {
      this.sexList = await XEAjax.get('/api/conf/sex/list')
    },
    async insertEvent (row) {
      let record = {
        sex: '1'
      }
      let { row: newRow } = await this.$refs.xTable.insertAt(record, row)
      await this.$refs.xTable.setActiveCell(newRow, 'sex')
    },
    getInsertEvent () {
      let insertRecords = this.$refs.xTable.getInsertRecords()
      this.$XModal.alert(insertRecords.length)
    },
    getSelectionEvent () {
      let selectRecords = this.$refs.xTable.getCheckboxRecords()
      this.$XModal.alert(selectRecords.length)
    },
    saveEvent () {
      const { insertRecords, removeRecords, updateRecords } = this.$refs.xTable.getRecordset()
      this.$XModal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
    }
  },
  watch: {
    show (value) {
      if (value === true) {
        this.loading1 = false
        this.loading2 = false
      }
    }
  }
}
</script>

<style scoped>

</style>
